<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <link rel="stylesheet" href="./flex.css"/>
    <style>
        p{
            white-space: pre-wrap;
            color: wheat;
        }
    </style>
</head>
<body>
    <p>
        需要注意的是:flex布局,子元素:
        vertical-align,float,clear元素将失效;

        justify-content属性定义了项目在主轴上的对齐方式,
        align-items: center;定义了项目在交叉轴上的对齐方式
    </p>
    <div class="container">
        <div class="box box1">
            <span></span>
        </div>
        <div class="box box2">
            <span></span>
        </div>
        <div class="box box3">
            <span></span>
        </div>
        <div class="box box4">
            <span></span>
        </div>
        <div class="box box5">
            <span></span>
        </div>
        <div class="box box6">
            <span></span>
        </div>
        <div class="box box7">
            <span></span>
        </div>
        <div class="box box8">
            <span></span>
        </div>
        <div class="box box9">
            <span></span>
        </div>
    </div>
    <p>
        space-between：两端对齐，项目之间的间隔都相等。
        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

        align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
        默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
    </p>
    <div class="container">
        <div class="box box2-1">
            <span></span>
            <span></span>
        </div>
        <div class="box box2-2">
            <span></span>
            <span></span>
        </div>
        <div class="box box2-3">
            <span></span>
            <span></span>
        </div>
        <div class="box box2-4">
            <span></span>
            <span></span>
        </div>
        <div class="box box2-5">
            <span></span>
            <span></span>
        </div>
        <div class="box box2-6">
            <span></span>
            <span></span>
        </div>
        <div class="box box2-7">
            <span class="item2-7"></span>
            <span class="item2-7"></span>
        </div>
        <div class="box box2-8">
            <span class="item2-8"></span>
            <span class="item2-8"></span>
        </div>
        <div class="box box2-9">
            <span class="item2-9"></span>
            <span class="item2-9"></span>
        </div>
        <div class="box box2-10">
            <span class="item2-10"></span>
            <span class="item2-10"></span>
        </div>
    </div>
    <div class="container">
        <div class="box box3-1">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box3-2">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box3-3">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box3-4">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box3-5">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box3-6">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box3-7">
            <span class="item3-7"></span>
            <span class="item3-7"></span>
            <span class="item3-7"></span>
        </div>
        <div class="box box3-8">
            <span class="item3-8"></span>
            <span class="item3-8"></span>
            <span class="item3-8"></span>
        </div>
    </div>
    <div class="container">
        <div class="box box4-1">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box4-2">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box4-3">
            <span></span>
            <span></span>
            <span></span>
            <div class="row">
                <span></span>
            </div>
        </div>
        <div class="box box4-4">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box4-5">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box4-6">
            <span></span>
            <span></span>
            <span></span>
            <div class="row">
                <span></span>
            </div>
        </div>
        <div class="box box4-7">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box4-8">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box4-9">
            <span></span>
            <span></span>
            <span></span>
            <div class="row">
                <span></span>
            </div>
        </div>
        <div class="box box4-10">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box4-11">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box4-12">
            <span></span>
            <span></span>
            <span></span>
            <div class="row">
                <span></span>
            </div>
        </div>
        <div class="box box4-13">
            <div class="row">
                <span></span>
                <span></span>
            </div>
            <div class="row">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="box box5-1">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box5-2">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box5-3">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box5-4">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box box5-5">
            <div class="row">
                <span></span>
                <span></span>
            </div>
            <div class="row">
                <span></span>
            </div>
            <div class="row">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    <div class="container container6">
        <div class="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <div class="container for-show">
        <div class="box">
            <span></span>
        </div>
        <div class="box">
            <span></span>
            <span></span>
        </div>
        <div class="box">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="box">
            <div class="row">
                <span></span>
                <span></span>
            </div>
            <div class="row">
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="box">
            <span></span>
            <span></span>
            <div class="row">
                <span></span>
            </div>
            <span></span>
            <span></span>
        </div>
        <div class="box">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <p>
        flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto;
            该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
        flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大;
        flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小;
        flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）它的默认值为auto，即项目的本来大小。
    </p>
    <div class="grid-container">
        <div class="grid">
            <div class="grid-cell">1/2</div>
            <div class="grid-cell">1/2</div>
        </div>
        <div class="grid">
            <div class="grid-cell">1/3</div>
            <div class="grid-cell">1/3</div>
            <div class="grid-cell">1/3</div>
        </div>
        <div class="grid">
            <div class="grid-cell">1/4</div>
            <div class="grid-cell">1/4</div>
            <div class="grid-cell">1/4</div>
            <div class="grid-cell">1/4</div>
        </div>
        <div class="grid">
            <div class="grid-cell">
                <span class="need-center red">
                    网格布局
                </span>
            </div>
            <div class="grid-cell">
                上面的1/2是使用line-height.<br>
                但这里是添加了一个span, 使用 absolute 垂直居中大法.<br>
                line-height:什么时候使用呢? 一般与文字有关都要用line-height.
                文字大小固定,不设置height时,文字是垂直居中的.如果想把行变高,而文字仍然垂直居中,就应该设置line-height,而不是height.

                但是,line-height也不是可以应对所有情况的.
            </div>
        </div>
    </div>


    <div class="holy-grail">
        <header>
            <span class="center">header</span>
        </header>
        <div class="holy-grail-body">
            <main>
                <span class="center red">圣杯布局</span>
            </main>
            <nav>
                <span class="center">nav</span>
            </nav>
            <aside>
                <span class="center">aside</span>
            </aside>
        </div>
        <footer>
            <span class="center">footer</span>
        </footer>
    </div>

    <div class="flow-layout">
        <div class="flow-container">
            <div class="flow-box">
                <div class="flow-item"></div>
            </div>
            <div class="flow-box">
                <div class="flow-item"></div>
                <div class="flow-item"></div>
            </div>
            <div class="flow-box">
                <div class="flow-item"></div>
                <div class="flow-item"></div>
                <div class="flow-item"></div>
            </div>
            <div class="flow-box">
                <div class="flow-item"></div>
                <div class="flow-item"></div>
                <div class="flow-item"></div>
                <div class="flow-item"></div>
            </div>
        </div>
    </div>
    <script>
        var log = function(msg){
            console.log(msg);
        }
        window.onload = function(){
            if(!document.getElementsByClassName) return ;

//            var eles = document.getElementsByClassName('need-center');
//            for(var i = 0; i < eles.length; i++){
//                var ele = eles[i];
////                log(ele.style)
////                var height = ele.style.left;
////                log(height);
//                ele.style.height = '16px';
//
//            }
        };
    </script>
</body>
</html>